<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch, ref, h } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { FormSchema } from '@/types/form'
import {
  LeakageTempData, ProcessData, ProcessFormData, NormalPolicyData, WaterPolicyData, TextPolicyData
  , BoxData
} from "@/api/leakage/types";
import {
  ElFormItem, ElInput, ElInputNumber, ElTabs, ElTabPane, ElForm, ElSelect, ElOption,
  ElSwitch, ElTable, ElTableColumn, ElDivider, ElSpace, ElButton, ElCheckboxGroup, ElCheckbox
} from 'element-plus';
import JsonViewer from 'vue-json-viewer'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<LeakageTempData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})

const formData = props.currentRow || {} as LeakageTempData;

const osOptions = [
  { label: 'linux', value: 1 },
  { label: 'windows', value: 0 }
]
const rules = reactive({
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

const processModel = ref({} as ProcessFormData);

const spacer = h(ElDivider, { direction: 'vertical' })

const handleEditProcess = (row: ProcessData) => {
  console.log(row);
}
const handleDeleteProcess = (row: ProcessData) => {
  console.log(row);
}

const netModel = ref({} as NormalPolicyData)

const water = ref({} as WaterPolicyData)
const text = ref({} as TextPolicyData)
const box = ref({} as BoxData)

const permissions = [
  {value: '12', label: '单文件回退'},
  {value: '13', label: '全盘回退'},
  {value: '14', label: '快照回退'},
  {value: '15', label: '分享'},
  {value: '3', label: '删除'},
]

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <Form :rules="rules" @register="register" is-custom>
    <template #default>
      <ElFormItem label="模板名称">
        <ElInput v-model="formData.name" />
      </ElFormItem>
      <ElFormItem label="权重">
        <ElInputNumber v-model="formData.weight" />
      </ElFormItem>
    </template>
  </Form>
  <ElTabs tab-position="left">
    <ElTabPane label="进程策略">
      <ElForm v-model="processModel">
        <ElFormItem label="系统类型">
          <ElSelect v-model="processModel.os">
            <ElOption v-for="osOption of osOptions" :key="osOption.value" :value="osOption.value"
              :label="osOption.label" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="　　启用">
          <ElSwitch v-model="processModel.RedirControl" active-text="开启" active-value="yes" inactive-value="no" />
        </ElFormItem>
        <ElFormItem label="　　进程">
          <ElTable :data="processModel.process">
            <ElTableColumn prop="process_md5" label="MD5" />
            <ElTableColumn prop="process_WriteDirectory" label="重定向位置" />
            <ElTableColumn prop="process_UnReDirectory" label="不进行重定向" />
            <ElTableColumn prop="process_lettterDrives" label="沙箱挂载位置" />
            <ElTableColumn prop="" label="操作">
              <template #default="{ row }">
                <el-space :size="6" :spacer="spacer">
                  <ElButton type="primary" link @click="handleEditProcess(row)">
                    编辑
                  </ElButton>
                  <ElButton type="primary" link @click="handleDeleteProcess(row)">
                    删除
                  </ElButton>
                </el-space>
              </template>
            </ElTableColumn>
          </ElTable>
          <ElButton class="mt-4" :icon="Plus">添加进程</ElButton>
        </ElFormItem>
        <ElFormItem label="JSON预览">
          <JsonViewer :value="processModel.process || '暂无预览'" />
        </ElFormItem>
      </ElForm>
    </ElTabPane>
    <ElTabPane label="网络策略">
      <ElTabs>
        <ElTabPane label="普通策略设置">
          <ElForm v-model="netModel">
            <ElFormItem label="策略">
              <ElSwitch v-model="netModel.enable" active-text="启用" active-value="1" inactive-value="0" />
            </ElFormItem>
            <ElFormItem label="应用层协议识别方法">
              <ElTable :data="netModel.appLevel">
                <ElTableColumn prop="pid" label="MD5" />
                <ElTableColumn prop="config_action" label="配置动作" />
                <ElTableColumn prop="action" label="规则的默认动作" />
                <ElTableColumn prop="" label="操作">
                  <template #default="{ row }">
                    <el-space :size="6" :spacer="spacer">
                      <ElButton type="primary" link @click="handleEditProcess(row)">
                        编辑
                      </ElButton>
                      <ElButton type="primary" link @click="handleDeleteProcess(row)">
                        删除
                      </ElButton>
                    </el-space>
                  </template>
                </ElTableColumn>
              </ElTable>
              <ElButton class="mt-4" :icon="Plus">添加方法</ElButton>
            </ElFormItem>
            <ElFormItem label="JSON预览">
              <JsonViewer :value="netModel.appLevel || '暂无预览'" />
            </ElFormItem>
          </ElForm>
        </ElTabPane>
        <ElTabPane label="高级策略设置">高级</ElTabPane>
        <ElTabPane label="对外策略设置">对外</ElTabPane>
        <ElTabPane label="驱动配置">驱动</ElTabPane>
      </ElTabs>
    </ElTabPane>
    <ElTabPane label="水印策略">
      <ElForm v-model="water">
        <ElFormItem label="字体">
          <ElInput v-model="water.font" />
        </ElFormItem>
        <ElFormItem label="行距">
          <ElInput v-model="water.margin" />
        </ElFormItem>
        <ElFormItem label="颜色">
          <ElInput v-model="water.color" />
        </ElFormItem>
      </ElForm>
    </ElTabPane>
    <ElTabPane label="文字过滤策略">
      <ElForm v-model="text">
        <ElFormItem label="文字过滤">
          <ElInput type="textarea" :rows="5" v-model="text.text" />
        </ElFormItem>
      </ElForm>
    </ElTabPane>
    <ElTabPane label="沙箱管理">
      <ElForm v-model="box">
        <ElFormItem label="设置类型">
          <ElCheckboxGroup v-model="box.permissions">
            <el-checkbox v-for="p in permissions" :key="p.value" :label="p.value">{{
              p.label
            }}</el-checkbox>
          </ElCheckboxGroup>
        </ElFormItem>
      </ElForm>
    </ElTabPane>
  </ElTabs>
</template>
